<template>
  <div class="page">
    <div class="detail-wrap">
      <div class="detail-box">
        <div class="box-title">
          <div class="title-left">
            <span class="left-top">2小时优惠券</span>
            <span class="tip">使用有效期:&nbsp;60分钟</span>
            <span class="tip">使用条件:&nbsp;停车费0-100元有效</span>
          </div>
          <div class="title-right">
            <span class="right-top">120分钟免费</span>
            <span class="tip">时间券</span>
          </div>
        </div>
        <div class="box-body">
          <div class="item">
            <span class="item-left">现价</span>
            <span class="item-right">8.00元</span>
          </div>
          <div class="item">
            <span class="item-left">原价</span>
            <span class="item-right">10.00元</span>
          </div>
          <div class="item">
            <span class="item-left">购买时间</span>
            <span class="item-right">2018-06-22 09:13:05</span>
          </div>
          <div class="item">
            <span class="item-left">结算类型</span>
            <span class="item-right">销售结算</span>
          </div>
          <div class="item">
            <span class="item-left">适用停车场</span>
            <span class="item-right">金百福，圆方，创意产业园</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 已过期 -->
    <div class="detail-wrap">
      <div class="detail-box">
        <div class="box-title expired">
          <div class="title-left">
            <span class="left-top">2小时优惠券</span>
            <span class="tip">使用有效期:&nbsp;60分钟</span>
            <span class="tip">使用条件:&nbsp;停车费0-100元有效</span>
          </div>
          <div class="title-right">
            <span class="right-top">120分钟免费</span>
            <span class="tip">时间券</span>
          </div>
        </div>
        <div class="box-body expired">
          <div class="item">
            <span class="item-left">现价</span>
            <span class="item-right">8.00元</span>
          </div>
          <div class="item">
            <span class="item-left">原价</span>
            <span class="item-right">10.00元</span>
          </div>
          <div class="item">
            <span class="item-left">购买时间</span>
            <span class="item-right">2018-06-22 09:13:05</span>
          </div>
          <div class="item">
            <span class="item-left">结算类型</span>
            <span class="item-right">销售结算</span>
          </div>
          <div class="item">
            <span class="item-left">适用停车场</span>
            <span class="item-right">金百福，圆方，创意产业园</span>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    data(){
      return {
        title: '优惠券详情', 
      }
    },
    created() {
      this.$store.commit("setTitle", this.title);
      this.$store.commit("setShowCloseBtn", false);
    },
  }
</script>

<style lang="less">
.detail-wrap{
  width: 100%;
  height: 540px;
  margin-top: 40px;
  padding: 0px 40px;
  .detail-box{
    height: 100%;
    // border: 1px solid blue;
    background: #FFFFFF;
    box-shadow: 0 3px 14px 0 rgba(0,0,0,0.08);
    .box-title{
      height: 190px;
      background: url('../../assets/img/bg_yellow_coupon@2x.png') no-repeat 0px 0px;
      background-size: contain;
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      padding: 4% 4% 0% 4%;
      &.expired{
        background: url('../../assets/img/bg_gray_mycoupon@2x.png') no-repeat 0px 0px;
        background-size: contain;
      }
      .title-left,.title-right{
        height: 100%;
        line-height: 100%;
        span{
          display: block;
          color: rgba(255,255,255,0.78);
          &.left-top{
            letter-spacing: 0;
            font-size: 36px;
          }
          &.right-top{
            letter-spacing: 1.16px;
            font-size: 46px;
          }
          &.tip{
            letter-spacing: 1px;
            font-size: 24px;
          }
        }  
      }
      .title-right{
        text-align: right;
      }
    }
    .box-body{
      height: 350px;
      box-shadow: 0 3px 14px 0 rgba(0,0,0,0.08);
      padding: 1% 4%;
      .item{
        display: flex;
        justify-content: space-between;
        margin-top: 3.5%;
        .item-left{
          font-size: 28px;
          color: #696969;
        }
        .item-right{
          font-size: 28px;
          color: #262626;
          word-wrap:break-word;
        }
      }
    }
    .expired{
      .item{
        .item-left{
          color: #ABABAB;
        }
        .item-right{
          color: rgba(24,24,24,0.40);
        }
      }
    }
  }
}
</style>
